<template>
  <div class="publicBox" id="supplierCSS">
          <div class="boxItem " id="publicSearch">

<el-form ref="form" :inline="true"  class="demo-form-inline">
            
  <!-- <el-form-item label="城市地址选着器组件使用">
           <publicCity></publicCity>
  </el-form-item> -->
  <el-form-item label="供应商名称">
            <el-input class="pubIptB" v-model="supplierName"  placeholder="请输入供应商名称"></el-input>
  </el-form-item>
 <el-form-item>
            <el-button class="pubBtnBlue" @click="getSupplierApi()" type="primary">查询</el-button>
            <el-button class="pubBtnGree"  type="primary" @click="supperlierNew()">新建</el-button>
  </el-form-item>
</el-form>
          </div>
          <public-table class="colum"
          ref="table"
          @handleChange="handleChange" 
          @changePage="changePage"
          @handleEdit="handleEdit" 
          :columnDefs="columnDefs" 
          :total="total"
          :tableData="tableData" 
          :order=true></public-table>

          
  </div>
</template>

<script>
import publicCity from "@/components/public/publicCity.vue"
import publicTable from "@/components/public/publicTable.vue"
import * as API from "@api/equipmenter.js"

export default {
  components: {
         publicTable,
         publicCity
  },
  data() {
    return {
        pageNum:1,
        pageSize:100,
        total:0,
        supplierName:"",
        columnDefs :[
            {headerName: '供应商ID', field: 'no',width:85},
            {headerName: '名称', field: 'name',width:259},
            {headerName: '供应产品', field: 'products',width:119},
            {headerName: '地址', field: 'address',width:232},
            {headerName: '联系人', field: 'contacts',width:77},
            {headerName: '电话', field: 'phone',width:111},
            {headerName: '创建时间', field: 'createtime',width:120},
            {headerName: '当前状态', field: 'statusname',width:90}
        ],
        tableData: []
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {

  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
    changePage(pageSize,pageNum){
          this.pageSize=pageSize;this.pageNum=pageNum
          this.getSupplierApi()
    },
    handleEdit(row){   //编辑
      this.$router.push({path:"/platform/equipment/supplierEdit",query:{data:row}})
    },
    supperlierNew(){
      this.$router.push({path:"/platform/equipment/supplierEdit"})
    },
    async getSupplierApi(){   //获取供应商列表值
          let params={page:this.pageNum,size:this.pageSize,name:this.supplierName}
          let res=await API.getSupplierApi(params)
          if(res.IsPositive){
              this.tableData=res.Data
           }else{
              this.$message.error({message:res.ErrorCode})
           }
    },
    async handleChange(index,row){ 
      //状态改变
              if(index==1) row.status=2
              if(index==2) row.status=3
              await API.editSupplierApi(row).then(res=>{
                if(res.IsPositive){
                  this.$message.success({message:"操作成功"})
                  this.getSupplierApi()
                }else{
                  this.$message.error({message:res.ErrorCode})
                }
              })

    },
  },
  created() {
      this.getSupplierApi()
  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
@import "../../styles/less/public.less";
  #supplierCSS{
    .boxItem{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .demo-form-inline{
        align-items: center;
      }
      .itemp{
      font-size: 16px;
      } 
    } 
  }
</style>